﻿<html>
<head>
    <title>XBMControl Web</title>
    <link rel="stylesheet" type="text/css" href="css/ext-all.css" />
    <link rel="stylesheet" type="text/css" href="css/xtheme-blue.css" />
    <link rel="stylesheet" type="text/css" href="css/slider.css" />

    <script type="text/javascript" src="js/ext-base.js"></script>
    <script type="text/javascript" src="js/ext-all-debug.js"></script>
    <script type="text/javascript" src="js/XBMControl.js"></script>

	<style type="text/css">
	html, body {
        font:normal 12px verdana;
        margin:0;
        padding:0;
        border:0 none;
        overflow:hidden;
        height:100%;
    }
	p {
	    margin:5px;
	}
    .settings {
        background-image:url(icons/folder_wrench.png);
    }
    .nav {
        background-image:url(icons/folder_go.png);
    }   
    </style>

	<script type="text/javascript">
	    Ext.onReady(function() {

	    var viewport = new Ext.Viewport({
	        layout: 'border',
	        items: [
                {
                    region: 'center',
                    contentEl: 'south',
                    layout: 'border',
                    split: true,
                    collapsible: true,
                    title: 'Media',
                    margins: '0 0 0 0',
                    items: [
                        new Ext.TabPanel({
                            region: 'west',
                            width: '49%',
                            deferredRender: false,
                            activeTab: 0,
                            split: true,
                            items: [{
                                contentEl: 'center1',
                                title: 'Music',
                                autoScroll: true
                            }, {
                                contentEl: 'center2',
                                title: 'Video',
                                autoScroll: true}]
                            })
                        , {
                            region: 'center',
                            contentEl: 'playlistArea',
                            autoScroll: true
                        }
                     ]
                }, {
                    region: 'north',
                    split: true,
                    title: 'XBMControl Web',
                    height: 170,
                    contentEl: 'tester'
                }
             ]
	    });
	    connectToMediaServer();
	});
	</script>

</head>
<body>


  <div id="tester" 
        
        style="position: absolute; height: 140px; width: 100%; top: 0px; left: 0px;">
      <img alt="" src="images/defaultAlbumCover.png"           
          style="position: absolute; top: 0px; left: 0px; height: 140px; width: 140px;" 
          id="albumArt" />
      <div style="position: absolute; width: 230px; height: 82px; top: 5px; left: 150px; color: #000000; font-family: Arial, Helvetica, sans-serif; font-size: medium;" 
          id="currentlyPlayingText">
      </div>
      <div id="songProgressBar"                            
          
          style="position: absolute; top: 106px; left: 153px; width: 222px; height: 25px;">
         &nbsp;
         <div style="position: absolute; top: -1px; left: 183px; width: 37px; vertical-align: bottom; right: 2px;">
         <span id="songProgressText"></span>
         </div> 
      </div>
      <div id="sound-slider" 
          
          style="position: absolute; width: 190px; height: 19px; top: 113px; left: 410px">
      </div>
      
      <div id="buttonPrevious"                             
          style="position: absolute; width: 32px; height: 32px; top: 12px; left: 414px">
      </div>
      
      <div id="buttonPause"                   
          style="position: absolute; width: 32px; height: 32px; top: 12px; left: 454px">
      </div>
      
      <div id="buttonPlay"                     
          style="position: absolute; width: 32px; height: 32px; top: 12px; left: 494px">
      </div>
      
      <div id="buttonStop"                     
          style="position: absolute; width: 32px; height: 32px; top: 12px; left: 534px">
      </div>

      <div id="connectionStatus"                               
          style="position: absolute; width: 80px; height: 12px; top: 55px; left: 416px">
      </div>

      <div id="buttonNext"                     
          style="position: absolute; width: 32px; height: 32px; top: 12px; left: 574px">
      </div>

      <div id="buttonGUI"                               
          
          style="position: absolute; width: 32px; height: 32px; top: 54px; left: 576px">
      </div>
   </div>

  <div id="center2" style="overflow: auto">
  </div>
  <div id="center1">
  </div>
  <div id="playlistArea" style="overflow: auto">
  </div>
  <div id="south">
  </div>
    <div id="guiControl" 
        style="position: absolute; width: 300px; height: 435px; top: 10px; left: 10px; z-index: 1001; float: left; display: block;">
        <img alt="" src="images/XBMControl%20Device%20Layout.png" usemap="#FPMap0">
<map name="FPMap0">
<area href="javascript:SendKey('10')" shape="rect" coords="34, 4, 105, 75">
<area href="javascript:SendKey('18')" shape="rect" coords="113, 4, 184, 75">
<area href="javascript:SendKey('9')" shape="rect" coords="193, 4, 263, 75">
<area href="javascript:hideGuiControl()" shape="rect" coords="273, 4, 297, 28">
<area href="javascript:SendKey('3')" shape="rect" coords="113, 85, 184, 154">
<area href="javascript:SendKey('1')" shape="rect" coords="33, 161, 105, 233">
<area href="javascript:SendKey('7')" shape="rect" coords="113, 161, 184, 233">
<area href="javascript:SendKey('2')" shape="rect" coords="192, 161, 263, 233">
<area href="javascript:SendKey('4')" shape="rect" coords="113, 240, 184, 313">
<area href="javascript:SendKey('89')" shape="rect" coords="2, 281, 71, 352">
<area href="javascript:SendKey('88')" shape="rect" coords="224, 281, 297, 352">
<area href="javascript:SendKey('78')" shape="rect" coords="4, 360, 71, 430">
<area href="javascript:SendKey('13')" shape="rect" coords="76, 360, 146, 430">
<area href="javascript:SendKey('12')" shape="rect" coords="151, 360, 222, 430">
<area href="javascript:SendKey('77')" shape="rect" coords="225, 360, 296, 430">
</map>
        </div>

   </body>
</html>
